<template>
  <div>子组件 - {{ props.a }} - {{ name }}</div>
  <button @click="fn">触发父组件事件</button>
</template>

<script setup lang="ts">
import { inject } from "vue";

// props的js的写法
// const props = defineProps(["a"]);
// const props = defineProps({
//   a: {
//     type: String,
//     required: true,
//   },
// });

// props的ts的写法
const props = defineProps<{
  a?: string;
}>();

// emits的js的写法
// const emit = defineEmits(["b"]);

// emits的ts的写法
const emit = defineEmits<{
  (e: "b", n: number): string;
}>();

const fn = (): void => {
  emit("b", 999);
};

// inject如果有第二个参数默认值
// 那么变量就是一个类型
// 如果没有第二个参数，就需要 | undefined
const name: string = inject("name", "lisi");
</script>
